<template>
    <div class="bill-view">

      <div class="content-view">

        <div class="title">收费清单</div>

        <div class="padd">诊所名称：{{name}}</div>

        <div class="padd">收费时间：{{datas.created_at}}</div>

        <div class="padd">收费员：{{datas.user_name}}</div>

        <div class="tabView" v-if="datas.prescription_ary_info && datas.prescription_ary_info.length > 0">
          <div class="tabTitle">
            <p class="tabName ">药品名称</p>
            <p class="tabNum">数量</p>
            <p class="tabPrice">单价</p>
          </div>

          <template v-for="(info,index) in datas.prescription_ary_info">
            <div class="tabItem" v-for="(item,index) in info.details">
              <p class="tabName">{{item.product_name}}</p>
              <p class="tabNum">{{item.number + item.unit}}</p>
              <p class="tabPrice">{{item.price.toFixed(2)}}</p>
            </div>
          </template>

        </div>

        <div class="tabView" v-if="datas.check_item && datas.check_item.length > 0">
          <div class="tabTitle">
            <p class="tabName ">检查项</p>
            <p class="tabNum">数量</p>
            <p class="tabPrice">单价</p>
          </div>

          <div class="tabItem" v-for="(item,index) in datas.check_item">
            <p class="tabName">{{item.check_item_name}}</p>
            <p class="tabNum">{{item.check_item_number}}</p>
            <p class="tabPrice">{{item.price.toFixed(2)}}</p>
          </div>

        </div>

        <div class="tabView" v-if="datas.surcharge && datas.surcharge.length > 0">
          <div class="tabTitle">
            <p class="tabName ">附加项</p>
            <p class="tabNum"></p>
            <p class="tabPrice">单价</p>
          </div>

          <div class="tabItem" v-for="(item,index) in datas.surcharge">
            <p class="tabName">{{item.surcharge_name}}</p>
            <p class="tabNum"></p>
            <p class="tabPrice">{{item.amount.toFixed(2)}}</p>
          </div>

        </div>


        <div class="total padd">
          <p>总价</p>
          <p>：¥{{datas.amount.toFixed(2)}}</p>
        </div>

        <div class="sell">优惠金额：¥ {{sell.toFixed(2)}}</div>
        <div class="receipts">实收合计：¥ {{datas.receipts_amount.toFixed(2)}}</div>

        <div class="hint">谢谢惠顾，祝您健康</div>

      </div>



    </div>
</template>

<script>
    export default {
        name: "bill",
        props:{
            datas:{
                type:Object,
                default:function(){
                    return{
                        amount:0,
                        receipts_amount:0
                    }
                }
            }
        },
        data:function () {
            return{
                name:'',
                sell:0,
            }
        },
        watch: {
            data: {
                handler(newval, oldval) {
                    if (newval){
                        this.sell = newval.amount - newval.receipts_amount
                    }

                },
                immediate: true,
            },
        },
        mounted() {
            this.name = this.$store.getters.userInfo.hospital_name
            
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/print/bill.scss";
</style>
